<template>
	<view>
		<home-title v-if="businessNo ==1 " title="车型榜单"></home-title>
		<view class="hotCarWrapper">
			<view class="vipTabsWrapper">
				<view class="tabs" :class="{active : businessNo ==3}" >
					<view class="tabItem" v-for="(item,index) in tabs" :key="item.vehicleClassification"
						:class="{vipActive : item.vehicleClassification == currentIndex}" @click="onChange(item)">
					    {{item.dictLabel}}
					</view>
				</view>
			</view>

			<view v-if="businessNo == 1" class="carContent">
				<view class="carlists" v-if="carList.length > 0">
					<view class="carItem" v-for="(item, index) in carList" :key="item.planId" @tap="goCarDetail(item)">
						<image class="carImage" :src="item.url|mmvImageUrl" mode=""></image>
						<view class="carInfo">
							<text class="carModel">{{item.modelInfo}}</text>
							<text class="other">{{item.operatingClassification+' ' + item.seating}}</text>
							<view class="priceInfo">
								<text class="price">{{item.minPrice}}</text>
								<text class="priceRight">起 ></text>
							</view>
						</view>
					</view>
				</view>
				<u-empty v-else marginTop="40upx" icon="list"></u-empty>
			</view>

			<view v-if="businessNo == 3" class="carContent">
				<view class="guidCarList" v-if="carList.length > 0">
					<view class="carItem" v-for="(item, index) in carList" :key="item.planId" @tap="goCarDetail(item)">
						<image class="carImage" :src="item.url|mmvImageUrl" mode=""></image>
						<text class="carModel">{{item.modelInfo}}</text>
						<text class="price">{{item.minPrice}}</text>
					</view>
				</view>
				<u-empty v-else marginTop="40upx" icon="list"></u-empty>
			</view>


		</view>
	</view>
</template>

<script>
	import homeTitle from '@/components/layout/home-title.vue'
	import setting from '@/settings.js'
	import {
		categories,
		homeModel
	} from '@/api/home-api.js'
	export default {
		name: 'hotCarView',
		components: {
			homeTitle
		},
		data() {
			return {
				baseImageUrl: setting.baseImageUrl,
				tabs: [],
				currentIndex: 1,
				sTime: null,
				eTime: null,
				carList: [],
			}
		},
		computed: {
			storeId() {
			   return this.$store.state.user.takeStoreId;	
			},
			businessNo() {
				return this.$store.state.order.businessNo;
			},
			tenantId() {
				return this.$store.state.user.tenantId;
			},
			startTime() {
				if (this.sTime) {
					return this.sTime;
				} else {
					return this.$store.state.order.startTime;
				}
			},
			endTime() {
				if (this.eTime) {
					return this.eTime;
				} else {
					return this.$store.state.order.endTime
				}

			}
		},
		mounted() {
			uni.$on('changeStore',()=> {
				this.getCategories();
			})
			setTimeout(()=> {
				this.getCategories();
			},1000)
			
		},
		methods: {
			onChange(item) {
				this.currentIndex = item.vehicleClassification;
				this.getHomeCar();
			},
			getCategories() {
				categories({
					tenantId: this.tenantId,
					bizType: this.businessNo
				}).then(res => {
					var tabs = res.data;
					this.currentIndex = tabs[0].vehicleClassification;
					this.tabs = tabs;
                    this.getHomeCar();
				})
			},
			getHomeCar() {
				homeModel({
					tenantId: this.tenantId,
					lon: this.$store.state.user.lng,
					lat: this.$store.state.user.lat,
					type: this.currentIndex,
					storeId: this.storeId,
					startTime: this.startTime,
					endTime: this.endTime,
					bizType: this.businessNo
				}).then(res => {
					this.carList = res.data;
				})
			},

			goCarDetail(item) {
				uni.navigateTo({
					url: '/pagesA/car/car-detail?planId=' + item.planId + '&carUrl=' + item.url
				})
			}

		}

	}
</script>

<style lang="scss" scoped>
	.hotCarWrapper {
		// background-color: $bg-white-color;	
	}
     
	.vipTabsWrapper {
		background-color: $bg-color-f5;
		padding: 0 20upx;
		.tabs {
			display: flex;
			justify-content: space-around;
			height: 88upx;
			align-items: center;
			.tabItem {
				color: #9ba2c4;
				font-size: 34upx;
				font-weight: bold;
				&.vipActive {
					color: #41465f;				
				}
			}
			
			&.active {
				justify-content: flex-start;
			}
		}
		
	}
	 
	 .tabWrapper {
		 .tabs {
		 	line-height: 88upx;
		 	display: flex;
		 	justify-content: flex-start;
		 	color: $text-color-ff;
		 	overflow: hidden;
			.tabItem {
				flex: 1;
				display: inline-block;
				text-align: center;
				white-space: nowrap;
				// color: $text-color-33;
				font-size: 32upx;
				font-weight: bold;
				background: $main-color;
				background: linear-gradient(to right, #009BE9 0%, #009CF9 100%);
				.active {
					background: $bg-white-color;
					color: $text-color-33;
					font-size: 34upx;
					font-weight: bold;
					position: relative;
					height: 65upx;
					line-height: 65upx;
				
					&::after {
						content: '';
						display: block;
						width: 28upx;
						height: 16upx;
						position: absolute;
						left: calc(100% - 100px);
						bottom: -5px;
						border-radius: 8upx;
						background: linear-gradient(to right, #c8edff 0%, #88d7ff 100%);
					}
				}
			}
		 }
	 }
	

	

	.carContent {
		background-color: $bg-white-color;
		border-radius: 16upx;
	}

	.carlists {
		.carItem {
			position: relative;
			padding: 20upx;
			width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid $liner-color;
            
			.carImage {
				width: 305upx;
				height: 165upx;
			}
		}

		.carInfo {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			overflow: hidden;
			padding: 15upx;

			.carModel {
				font-size: 28upx;
				font-weight: bold;
				color: $text-color-33;
			}

			.other {
				margin: 14upx 0;
				font-size: 20upx;
				color: $text-color-99;
			}

			.priceInfo {
				color: $text-color-price;
				font-size: 44upx;
				font-weight: bold;
				position: relative;

				&::before {
					content: '¥';
					font-size: 22upx;
				}
			}

			.priceRight {
				font-size: 22upx;
				color: $text-color-33;

				&::before {
					content: '/天 ';
					color: $text-color-price;
					font-size: 22upx;
				}
			}
		}
	}

	.guidCarList {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 0 40upx;
        border-radius: 16upx;
		.carItem {
			margin-top: 40upx;
			width: 354upx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.carImage {
				width: 305upx;
				height: 165upx;
			}

			.carModel {
				color: $text-color-33;
				font-size: 28upx;
				font-weight: bold;
				margin: 20upx 0;
			}

			.price {
				color: $text-color-price;
				font-size: 36upx;
				font-weight: bold;

				&::before {
					content: '¥';
					font-size: 22upx;
				}

				&::after {
					content: '/天';
					font-size: 22upx;
				}
			}

		}
	}
</style>
